<!DOCTYPE HTML>
<html style="height: 100%">
<!-- Modified from http://static.jgoboard.com/jgoboard/demoSGF.html by Joonas Pihlajamaa-->
<head>
    <title>Play Go Against a DCNN</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/playgo.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
</head>
<body style="height: 100%">
<div id="contentBlock">
    <center>
        <h1>Play Go Against a Deep Neural Network</h1>
    </center>
    <div style="display: inline-block;">
        <div style="float: left">
            <div id="spinner" style="width: 534px; height: 534px; position: relative"></div>
            <div id="board-preview"></div>
            <div id="board" style="display: none"></div>
            <p class="controls" style="width: 500px;">
                <a href="#" onclick="goToMove(-1000); return false;"><i class="fa fa-fast-backward"></i></a>
                <a href="#" onclick="goToMove(-10); return false;"><i class="fa fa-backward"></i></a>
                <a href="#" onclick="goToMove(-1); return false;"><i class="fa fa-step-backward"></i></a>
                <strong id="move">0</strong> / <strong id="moves">0</strong>
                <a href="#" onclick="goToMove(1); return false;"><i class="fa fa-step-forward"></i></a>
                <a href="#" onclick="goToMove(10); return false;"><i class="fa fa-forward"></i></a>
                <a href="#" onclick="goToMove(1000); return false;"><i class="fa fa-fast-forward"></i></a>
            </p>
        </div>
        <div style="float: left; padding: 1em; text-align: left; margin-left: 10px; margin-top: 40px">
            <input id="autoMoveCheckbox" type="checkbox"
                   title="Have the neural network play moves in response to your moves" checked>Auto Move</input> <br>
            <input id="showAnalysis" type="checkbox" onclick="showAnalysisClicked()"
                   title="Impose a heatmap on the board showing which moves the neural networks thinks are the strongest"
                   unchecked>Show Analysis</input> <br>
            <button id="makeMoveButton" type="button" onclick="convMove()" title="Make the neural network play a move">
                Make Move
            </button>

            <button id="autoMoveButton" type="button" onclick="myAutoMove()"
                    title="Make the neural network play a move">
                Auto Move
            </button>
            <br>

            <p>
                Black captures: <strong id="black_captures">0</strong><br>
                White captures: <strong id="white_captures">0</strong>
            </p>
        </div>
    </div>
</div>

<script src="js/spin.min.js"></script>
<script>
    // Draw a spinner to show while loading
    var opts = {scale: 2.5};
    var target = document.getElementById('spinner');
    var spinner = new Spinner(opts).spin(target);
</script>
<script src="js/jgoboard-3.4.2.js"></script>
<script src="js/board.js"></script>
<script>
    // Draw a temporary board to show while loading
    var jboard = new JGO.Board(19, 19);
    var jsetup = new JGO.Setup(jboard, JGO.BOARD.medium);
    jsetup.setOptions({stars: {points: 5}});
    jsetup.create('board-preview', function (canvas) {
        var target = document.getElementById('spinner');
        target.style.position = "absolute"; // Make we are behind, not next, the spinner
    })
</script>
<!-- Load the convent library, the net itself, and the script to allow playing. This is the slow part -->
<script src="js/convnet-min.js"></script>
<script src="js/net.js"></script>
<script src="js/man_vs_machine.js"></script>
<script>
    // Remove all the loading icons
    spinner.stop();
    document.getElementById('spinner').remove();
    document.getElementById('board-preview').remove();
    document.getElementById('board').style.display = "block";

    function myAutoMove() {
        convMove();
        setTimeout("myAutoMove()",1);
    }

</script>
</body>
</html>
